<template>
  <div class="height-full">
    <div class="ml10 d-flex flex-ju-sb flex-a-c">
      <div class="title-line list-caption">
        入池稿件 （稿件上传额度：
        <span class="text-highlight">{{ manuQuota.total || '-' }}篇/日</span>
        &nbsp; 当前单位今日还可上传
        <span class="text-highlight">{{ manuQuota.available || '0' }}篇</span>
        ）
      </div>
    </div>

    <div class="list-filter mt10">
      <Form class="custom-ivu-form" inline :label-width="80" @submit.native.prevent="handleFormSubmit">
        <FormItem label="所属主题">
          <Select v-model="formData.theme" class="form-item--width" clearable @on-change="handleFormSubmit">
            <Option v-for="(nt, i) of themeList" :key="i" :value="nt.key">{{ nt.value }}</Option>
          </Select>
        </FormItem>

        <FormItem label="产品分类">
          <Select
            v-model="formData.product"
            class="form-item--width"
            element-id="select2"
            clearable
            @on-change="handleFormSubmit"
          >
            <Option v-for="(nt, i) of productList" :key="i" :value="nt.key">{{ nt.value }}</Option>
          </Select>
        </FormItem>

        <FormItem label="标题">
          <!-- <template #label>
            <KeywordsSelect :keyword.sync="keyword"></KeywordsSelect>
          </template> -->
          <Input
            v-model="formData.title"
            :label-width="60"
            placeholder="请输入"
            class="form-item--width"
            size="large"
            clearable
          ></Input>
        </FormItem>

        <FormItem label="时间范围" class="width-auto">
          <TimeRange
            v-model="formData.timeType"
            @on-time-type-change="handleTimeTypeChange"
            @on-date-range-change="handleTimeRange"
          />
        </FormItem>

        <Button class="btn-search" type="primary" html-type="submit">查询</Button>
      </Form>
    </div>

    <div class="list-table-box mt12">
      <div class="list-caption f16">稿件列表</div>

      <CommonTablePage
        :loading="tableLoading"
        :columns="columns"
        :tableData="tableData"
        :total="pagination.total"
        @on-selection-change="handleTableSelect"
        @on-sort-change="handleTableSort"
        @on-change="handlePageChange"
        @on-page-size-change="handlePageSizeChange"
      ></CommonTablePage>
    </div>

    <ModalAdoptList :visible.sync="visible.list" :id="articleId"></ModalAdoptList>
  </div>
</template>

<script>
// components
import KeywordsSelect from '@/components/common/KeywordsSelect/KeywordsSelect'
import CommonTablePage from '@/components/common/CommonTablePage/CommonTablePage'
import ModalAdoptList from '@/components/common/ModalAdoptList/ModalAdoptList'
import TimeRange from '@/components/customFrom/TimeRange'

// util
import { createCommonPagination, createForm } from '@/utils/service.js'
import { createColumns } from './service'

import mixin from './mixin'
export default {
  name: 'EntryManuscript',

  components: { KeywordsSelect, CommonTablePage, ModalAdoptList, TimeRange },

  mixins: [mixin],

  data() {
    return {
      manuQuota: {},

      formData: createForm(),
      keyword: { key: 'title', value: '标题' },

      tableLoading: false,
      columns: createColumns(this),
      tableData: [],
      selection: [],
      articleId: '',

      pagination: createCommonPagination(),

      visible: {
        list: false,
      },
    }
  },

  computed: {
    themeList() {
      return this.$store.getters.themeList
    },
    productList() {
      return this.$store.getters.productList
    },
    stateList() {
      return this.$store.getters['provideEnd/stateList']
    },
  },

  watch: {
    'keyword.key'(v) {
      if (v === 'title') {
        this.formData.username = ''
      } else {
        this.formData.title = ''
      }
    },

    'visible.list'(v) {
      // 关闭弹窗时，清空id
      if (!v) {
        this.articleId = ''
      }
    }
  },

  methods: {
    handleTimeRange(date) {
      this.formData.startTime = date[0]
      this.formData.endTime = date[1]
      this.handleFormSubmit()
    },

    handleTimeTypeChange(v) {
      // console.log(v)
      if (v === '自定义') {
      } else {
        this.formData.startTime = ''
        this.formData.endTime = ''
        this.handleFormSubmit()
      }
    },

    handleFormSubmit(no_reset) {
      if (no_reset !== true) {
        this.formData.pageNo = 1
      }
      this.getEntryManuList({ ...this.formData })
    },

    handleTableSelect(selection) {
      this.selection = selection
    },

    handleTableSort({ key, order }) {
      // console.log(123, column, key, order)
      if (order === 'normal') {
        this.formData.orderField = 'createTime'
        this.formData.desc = true
      } else {
        this.formData.orderField = key
        this.formData.desc = order === 'desc'
      }
      this.handleFormSubmit()
    },

    handlePageChange(page) {
      this.formData.pageNo = page
      this.handleFormSubmit(true)
    },
    handlePageSizeChange(pageSize) {
      this.formData.pageSize = pageSize
      this.handleFormSubmit(true)
    },

    /* 操作 */
    viewAdoptList(row) {
      // console.log(row)
      this.articleId = row.id
      this.visible.list = true
    },
  },

  mounted() {
    /*     for (let i = 0; i < 5; i++) {
      this.tableData.push({
        title:
          '国务院办公厅关于做好优化营商环境改革举措复制推广借鉴工作借鉴工作工作国务院办公厅关于做好优化营商环境改革举措复制推广借鉴工作借鉴工作工作',
        entryAdoptCount: 22,
      })
    } */
    /* this.$Notice.warning({
      title: 'Notification title',
      desc: 'Here is the notification description. Here is the notification description. ',
      duration: 0
    }) */
    this.handleFormSubmit()
    this.getDailyQuota()
  },
}
</script>

<style lang="less" scoped></style>
